<template>
  <header>
    <div class="container">
      <!-- 第一部分 首页链接 -->
      <router-link to="/">
        <i class="iconfont icon-sun"></i>
        <p>新中地天气</p>
      </router-link>
      <!-- 第二部分 实时天气 -->
      <div class="item">
        <h4>{{localCityName}}</h4>
        <span>实时天气: {{ localCityWeather }} {{ localCityTemperature }}℃</span>&nbsp;&nbsp;<span>{{localCityWind}}风 {{localCityWindPower}}级</span>
      </div>
      <!-- 第三部分 模态框 -->
      <div class="hint">
        <i class="iconfont icon-info" @click="showInfo = true"></i>
        <!-- 模态框的聚焦效果还没实现 即 模态框高亮 且 背景变暗 -->
        <div v-if="showInfo" class="hint-content">
          <h3>关于：</h3>
          <p>这个应用可以用来关注您选择城市的近期天气</p>
          <br />
          <h3>如何使用：</h3>
          <p>1.点击搜索框输入城市名称</p>
          <p>2.在搜索结果中选中一个城市，您将获取当地近期天气</p>
          <p>3.点击右侧的＋号可以将城市的天气情况保存在首页</p>
          <br />
          <h3>移除城市:</h3>
          <p>如果您不想在首页关注某个城市,可以通过底部的按钮删除它</p>
          <br />
          <button @click="showInfo = false" class="hint-close">关闭</button>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref,onMounted} from 'vue';

const showInfo = ref(false);

const localCityName = ref('');
const localCityWeather = ref('');
const localCityTemperature = ref('');
const localCityWind = ref('');
const localCityWindPower = ref('');

/* 通过接口获取本地天气数据 */
import {getLocalCityData,getCityAdcodeData,getCityWeatherData} from '@/api/index.js';
const localCityData = ref({});
const cityAdcodeData = ref({});
const cityWeatherData = ref({});

onMounted(async () => {
  localCityData.value = await getLocalCityData();
  cityWeatherData.value = await getCityWeatherData(localCityData.value.adcode,'base');
  if (Array.isArray(cityWeatherData.value.lives) && cityWeatherData.value.lives.length > 0) {
    localCityName.value = cityWeatherData.value.lives[0].city;
    localCityWeather.value = cityWeatherData.value.lives[0].weather;
    localCityTemperature.value = cityWeatherData.value.lives[0].temperature;
    localCityWind.value = cityWeatherData.value.lives[0].winddirection;
    localCityWindPower.value = cityWeatherData.value.lives[0].windpower;
  }
});
</script>

<style lang="scss" scoped>
// 在线引入 阿里图标库
@import 'http://at.alicdn.com/t/c/font_4804399_1lxm6r0639s.css';

header {
  position: sticky;
  height: 80px;
  background-color: #00668a;
  color: white;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  .container {
    display: flex;
    max-width: 1536px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10rem;
    padding-left: 10rem;
    align-items: center;
    //border: 1px solid red;
    :deep(.router-link-active) {
      display: flex;
      text-decoration: none;
      align-items: center;
      i,
      p {
        font-size: 1.5rem;
        margin-right: 16px;
        color: white;
      }
    }
    .item {
      display: flex;
      align-items: center;
      h4 {
        font-size: 20px;
        font-weight: normal;
        margin-right: 16px;
      }
      span {
        font-size: 14px;
      }
    }
    .hint {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      .hint-content {
        position: fixed;
        top: 10%;
        left: 35%;
        background-color: rgb(255, 255, 255);
        color: rgb(0, 0, 0);
        padding: 20px;
        border-radius: 8px;
        .hint-close {
          width: 70px;
          height: 35px;
          color: white;
          background-color: #00668a;
          border:none;
          border-radius: 5px;
          &:hover {
            cursor: pointer;
            background-color: #ff6700;
          }
        }
      }
      &:hover {
        cursor: pointer;
        color: #ff6700;
      }
    }
  }
}
</style>